
// 自适应echarts的函数
function fontSize(res) {
  // alert(111);
  let docEl = document.documentElement,
      clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 1920);
  // console.log(fontSize);
  // console.log(res * fontSize);
  return res * fontSize;
}
function managementModelChart(
  echarts,
  idStr,
  data,
  color,
  title_padding = [10, 30]
) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idStr));

  var scale = 1;
  var echartData = data;
  var rich = {
    yellow: {
      color: "#5BFFFF",
      // fontSize: 26,
      fontSize: fontSize(0.26),
      fontFamily: "DIN-Bold",
      align: "center",
      padding:[0,0,0,0]
    },
    total: {
      color: "#fff",
      // fontSize: 16,
      fontSize: fontSize(0.16),
      align: "center",
      padding: [5, 0],
      padding:[0,0,0,0]
    },
    white: {
      color: "#7D94CF",
      align: "center",
      // fontSize: 12,
      fontSize: fontSize(0.15),
      padding:[0,0,0,0]
    },
    blue: {
      color: "#3bc7ff",
      // fontSize: 10 * scale,
      fontSize: fontSize(0.1)*scale,
      align: "center"
    },
    hr: {
      borderColor: "#a2c7f3",
      width: "100%",
      borderWidth: 1,
      height: 0
    }
  };
  option = {
    grid: {
      left: "25%",
      right: "4%",
      bottom: "3%"
    },
    legend: {
      // position:'center',
      // top:0,
      selectedMode: false,
      formatter: function (name) {
        var total = 0;
        var averagePercent;
        echartData.forEach(function (value, index, array) {
          total += value.value;
        });
        return "{white|总计}\n{yellow|" + total + "}";
      },
      data: [echartData[0].name],
      left: "center",
      top: "center",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        // fontSize: 26,
        fontSize: fontSize(0.26),
        fontFamily: "DIN-Bold",
        rich: rich
      }
    },
    title: {
      // show：false,
      // text: "总计",
      left: "center",
      // top: "48%",
      padding: title_padding,
      textStyle: {
        color: "#7d94cf",
        // fontSize: 13,
        fontSize: fontSize(0.13),
        fontWeight: "normal",
        align: "center"

      }
    },
    series: [
      {
        type: "pie",
        // center: ["50%","50%"],
        radius: ["40%", "50%"],
        hoverAnimation: false,
        color: color,
        label: {
          normal: {
            formatter: function (params, ticket, callback) {
              var total = 0; 
              var percent = 0; 
              echartData.forEach(function (value, index, array) {
                total += value.value;
              });
              percent = ((params.value / total) * 100).toFixed(1);
              return "{white|" + params.name + "}\n{total|" + percent + "%}";
            },
            rich: rich
          }
        },
        labelLine: {
          normal: {
            length: 10 * scale,
            length2: 2,
            lineStyle: {
              color: "#a2c7f3"
            }
          }
        },
        data: echartData
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.onresize = myChart.resize();
}


function managementModelChart2(
  echarts,
  idStr,
  data,
  color,
  title_padding = [10, 30]
) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idStr));

  var scale = 1;
  var echartData = data;
  var rich = {
    yellow: {
      color: "#5BFFFF",
      // fontSize: 26,
      fontSize: fontSize(0.2),
      fontFamily: "DIN-Bold",
      align: "center"
    },
    total: {
      color: "#fff",
      // fontSize: 16,
      fontSize: fontSize(0.15),
      align: "center",
      // padding: [5, 0]
    },
    white: {
      color: "#7D94CF",
      align: "center",
      // fontSize: 14,
      fontSize: fontSize(0.14),
    },
    blue: {
      color: "#3bc7ff",
      // fontSize: 10 * scale,
      fontSize: fontSize(0.1)*scale,
      align: "center"
    },
    hr: {
      borderColor: "#a2c7f3",
      width: "100%",
      borderWidth: 1,
      height: 0
    }
  };
  option = {
    grid: {
      top:'20%',
      left:"0px",
      right:"0px",
      bottom:"0px",
      // height:"100%",
      height:'auto',
      width:'auto',
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0; //各科正确率总和
        var averagePercent; //综合正确率
        echartData.forEach(function (value, index, array) {
          total += value.value;
        });
        return "{white|总计}\n{yellow|" + total + "}";
      },
      data: [echartData[0].name],
      left: "center",
      top: "center",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        // fontSize: 26,
        fontSize: fontSize(0.26),
        fontFamily: "DIN-Bold",
        rich: rich
      }
    },
    title: {
      // text: "总计",
      left: "center",
      // top: "48%",
      // padding: title_padding,
      textStyle: {
        color: "#7d94cf",
        // fontSize: 13,
        fontSize: fontSize(0.13),
        fontWeight: "normal",
        align: "center"

      }
    },
    series: [
      {
        type: "pie",
        // center: ["50%","55%"],
        radius: ["45%", "60%"],
        hoverAnimation: false,
        color: color,
        label: {
          normal: {
            formatter: function (params, ticket, callback) {
              var total = 0; 
              var percent = 0; 
              echartData.forEach(function (value, index, array) {
                total += value.value;
              });
              percent = ((params.value / total) * 100).toFixed(1);
              return "{white|" + params.name + "}\n{total|" + percent + "%}";
            },
            rich: rich
          }
        },
        labelLine: {
          normal: {
            length: 20 * scale,
            length2: 0,
            lineStyle: {
              color: "#a2c7f3"
            }
          }
        },
        data: echartData
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.onresize = myChart.resize();
}






//柱状图
function barchart(echarts, idStr, data, color) {
  var myChart = echarts.init(document.getElementById(idStr));

  var option = {
    color: ["#00b9e3"],
    grid: {
      // height:130,
      left: "10%",
      top: "5%",
      right: "0%",
      bottom: "15%"
    },
    xAxis: {
      show: true,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2b71cb"
        }
      },
      type: "category",
      data: data.name,
      axisLabel: {
        show: true,
        interval:0,//代表显示所有x轴标签显示
        color: "#fff",
        textStyle:{
          fontSize: fontSize(0.14),
        }
      }
    },
    yAxis: {
      show: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2b71cb"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      type: "value",
      axisLabel: {
        show: true,
        color: "#7d94cf",
        textStyle:{
          fontSize: fontSize(0.14),
        }
      }
    },
    series: [
      {
        data: data.quantity,
        type: "bar",
        barWidth: 20,
        // barGap: "2%" /*多个并排柱子设置柱子之间的间距*/
        // barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}


function lianghuabarchart(echarts, idStr, data, color) {
  var myChart = echarts.init(document.getElementById(idStr));

  var option = {
    color: color,
    grid: {
      left: "5%",
      top: "20%",
      right: "5%",
      bottom: "15%"
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2b71cb"
        }
      },
      axisLabel: {
        // fontSize: 12,
        fontSize: fontSize(0.12),
        color: "#fff"
      },
      type: "category",
      data: ["亮化等级A", "亮化等级B", "量化等级C"]
    },
    yAxis: {
      max: 200,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        data: data,
        type: "bar",
        barWidth: 20,
        label: {
          normal: {
            show: true,
            // fontSize: 18,
            fontSize: fontSize(0.18),
            fontFamily: "DIN-Bold",
            color: "#fff",
            position: "top"
          }
        }
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = myChart.resize();
}

function jiucanbars(echarts, idStr, data, color) {
  var myChart = echarts.init(document.getElementById(idStr));
  var data1 = data[0];
  var data2 = data[1];
  var data3 = data[2];
  option = {
    tooltip: {
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // 	年度完成率和季度完成率颜色
    color: ["#00d5b8", "#f2c422", "#54b523"],
    // color: ["#00bde9", "#54b523", "#f2c422"],
    grid: {
      left: "3%",
      right: "4%",
      top: "25%",
      bottom: "8%",
      containLabel: true
    },
    legend: {
      data: ["最高", "平均", "最低"],
      align: "left",
      right: 0,
      top: "10%",
      textStyle: {
        color: "#fff"
      }
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#1B3F81"
          }
        },
        axisTick:{
            lineStyle:{
                width: 0
            }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#1B3F81"
          }
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          margin: 15,
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            // fontSize: 14,
            fontSize: fontSize(0.14),
          }
        },
        data: ["早餐", "中餐", "晚餐"]
      }
    ],
    yAxis: [
      {
        max: 15,
        type: "value",
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          margin: 15,
          textStyle: {
            color: "#6B9DD7",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            // fontSize: 12,
            fontSize: fontSize(0.12),
          }
        },
        axisLine: {
          lineStyle: {
            color: "#1B3F81"
          }
        },
        axisTick:{
            lineStyle:{
                width: 0
            }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#1B3F81"
          }
        }
      }
    ],
    series: [
      {
        name: "最高",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            show: true,
            borderWidth: 0
          }
        },
        label: {
          normal: {
            show: true,
            color: "#fff",
            position: "top"
          }
        },
        data: data1
      },
      {
        name: "最低",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            show: true,
            borderWidth: 0
          }
        },
        label: {
          normal: {
            show: true,
            color: "#fff",
            position: "top"
          }
        },
        data: data2
      },
      {
        name: "平均",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            show: true,
            borderWidth: 0
          }
        },
        label: {
          normal: {
            show: true,
            color: "#fff",
            position: "top"
          }
        },
        data: data3
      }
    ]
  };

  myChart.setOption(option);
  setTimeout(function (){
    window.onresize = function () {
      myChart.resize();
    }
},200)
}
